<template>
    <div class="park_cord">

        <el-card shadow="never" class="card-com">
            <div class="card-1">
                <searchPanel @refresh="getData('reset')" @changePanel="resizeWin">
                    <!-- 查询面板 -->
                    <template v-slot:search>
                        <el-form :inline="true" :model="listSearch" class="demo-form-inline" label-width="120px">
                            <el-row :gutter="20">
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="序号" style="width: 100%;">
                                        <NormalInput v-model:model-value="listSearch.condition.id"
                                            @get-data="getData('search')"></NormalInput>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="产品链接" style="width: 100%;">
                                        <NormalInput v-model:model-value="listSearch.condition.productLink"
                                            @get-data="getData('search')"></NormalInput>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="产品名称" style="width: 100%;">
                                        <BlackSelect v-model:select-value="listSearch.condition.productCode"
                                            :filterable="true" :options="listCollect.productList"
                                            @my-change="getData('search')" />
                                    </el-form-item>
                                </el-col>

                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="状态" style="width: 100%;">
                                        <BlackSelect v-model:select-value="listSearch.condition.status"   @my-change="getData('search')"
                                            :options="ProductLinkConfigStatusEnum">
                                        </BlackSelect>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="产品大类" style="width: 100%;">
                                        <BlackSelect v-model:select-value="listSearch.condition.productCategoryCode"
                                            :filterable="true" :options="listCollect.totalProduct"
                                            @my-change="getData('search')" />
                                    </el-form-item>
                                </el-col>

                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="环境" style="width: 100%;">
                                        <BlackSelect v-model:select-value="listSearch.condition.environment"
                                            :filterable="true" :options="listCollect.envList"
                                            @my-change="getData('search')" />
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="场景" style="width: 100%;">
                                        <BlackSelect v-model:select-value="listSearch.condition.scenario"
                                            :filterable="true" :options="listCollect.sceneList"
                                            @my-change="getData('search')" />
                                    </el-form-item>
                                </el-col>

                            </el-row>
                            <el-row justify="end">
                                <el-button type="primary" @click="getData('search')">查询</el-button>
                                <el-button @click="getData('reset')">重置</el-button>
                            </el-row>

                        </el-form>
                    </template>
                    <!-- 字段添加 -->
                    <template v-slot:add>

                        <el-button type="primary" @click="addEnvironmentBtn('add')" :icon="Plus"
                            title="新增环境管理">环境管理</el-button>
                        <el-button type="primary" @click="addSceneBtn('add')" :icon="Plus"
                            title="新增环境管理">场景管理</el-button>

                    </template>
                    <template v-slot:edit>
                        <el-button :icon="Plus" type="primary" @click="AddEdit('add')" title="新增产品链接配置"></el-button>
                        <DropItem v-model:tableProp="tableProp"></DropItem>
                    </template>
                </searchPanel>
            </div>
            <div class="card-2">
                <!-- table数据 -->
                <OnlyTable ref="onlyTableRef" class="card-2" :tableProps="tableProp" :pageTotal="pageParams.total"
                    @get-page="handPage" :tableData="pageParams.tableData" :tableHeight="pageParams.tableHeight"
                    :loading="pageParams.loadIng">
                    <template #attachmentUri="scope">
                        <el-image style="width: 35px; height: 35px" :src="scope.row.attachmentUri"
                            :previewSrcList="[scope.row.attachmentUri]" fit="cover" :zoom-rate="1.2" :max-scale="7"
                            :min-scale="0.2" :preview-teleported="true">
                        </el-image>
                    </template>
                    <template #handle="scope">

                        <el-button type="primary" size="small" link @click="AddEdit('edit', scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" link @click="delBtn(scope.row)">删除</el-button>
                        <el-button type="primary" size="small" link @click="detailBtn(scope.row)">详情</el-button>

                    </template>
                </OnlyTable>

            </div>
        </el-card>
        <addAndEdit ref="addAndEditRef" @refresh="getData('reset')" @search-edit="getData('search')"></addAndEdit>
        <addEnvironment ref="addEnvironmentRef"></addEnvironment>
        <addScene ref="addSceneRef"></addScene>
        <detailVue ref="detailRef" </detailVue>
    </div>
</template>

    <script setup lang="ts">
    import { storeToRefs } from 'pinia';
    import { onMounted, ref, nextTick, onUnmounted, defineAsyncComponent } from 'vue';
    import { Search, Plus, Refresh, Download } from '@element-plus/icons-vue'
    import { useComListData } from "@/store/list"
    import _ from "lodash"
    import { productLinkConfigListStore } from "./pageStore"
    import BlackSelect from '@/components/customSon/blackSelect.vue';
    import { useEnumStore } from '@/store/enumeration';
    const { ProductLinkConfigStatusEnum } = storeToRefs(useEnumStore());

    const onlyTableRef = ref()
    const addAndEdit = defineAsyncComponent(() => import("./components/addAndEdit.vue"))
    const addEnvironment = defineAsyncComponent(() => import("./components/addEnvironment.vue"))
    const addScene = defineAsyncComponent(() => import("./components/addScene.vue"))
    const detailVue = defineAsyncComponent(() => import("./components/detail.vue"))
    const { detailData, tableProp, listSearch, pageParams, addAndEditRef, addSceneRef, addEnvironmentRef, detailRef } = storeToRefs(productLinkConfigListStore())
    const { getDate1, detailBtn, handPage, delBtn, AddEdit, addEnvironmentBtn, addSceneBtn } = productLinkConfigListStore()
    const { getSceneList, getEnvList, getEquityList, getSchemeList, getAllTotalProduct, getProListAll } = useComListData()
    const { listCollect } = storeToRefs(useComListData())

    onMounted(() => {
        getDate1('reset')
        nextTick(() => {
            const dom1 = document.querySelector(".card-1") as any;
            const dom2 = document.querySelector(".card-com") as any;
            if (dom2) {
                const height = dom2.offsetHeight - dom1.offsetHeight - 70;
                pageParams.value.tableHeight = height;
            }
        })
        getSceneList()
        getEnvList()
        getEquityList()
        getSchemeList()
        getAllTotalProduct()
        getProListAll({})
        window.addEventListener('resize', resizeWin)
    })
    onUnmounted(() => {
        window.removeEventListener('resize', resizeWin)
    })
    const resizeWin = _.debounce(() => {
        const dom1 = document.querySelector(".card-1") as any;
        const dom2 = document.querySelector(".card-com") as any;
        if (dom2) {
            const height = dom2.offsetHeight - dom1.offsetHeight - 70;
            pageParams.value.tableHeight = height;
        }
    }, 200)
    const getData = (type: string) => {
        if (type == 'reset') onlyTableRef.value.initPagination()
        getDate1(type)
    }
</script>

    <style scoped lang="scss">
    .park_cord {
        height: calc(100vh - 70px);

        .card-com {
            display: flex;
            flex-direction: column;
            // height: 100%;

            .card-2 {
                flex-grow: 1;
            }
        }
    }
</style>